Hiding Empty Paragraphs Using :empty in CSS
You can use the :empty pseudo-class in CSS to select and hide elements that contain no child elements or text nodes. This is useful for cleaning up unwanted empty paragraphs in dynamically generated content or CMS outputs.
:emptymatches elements that have no children, including text nodes or whitespace.It can be used to hide empty elements like
<p>,<div>, or<span>.Whitespace or line breaks inside an element will prevent
:emptyfrom matching.
In this example, the second paragraph (<p></p>) is hidden because it’s empty. The :empty pseudo-class applies display: none; only to paragraphs that have no content or children.
Use
:emptyto clean up layouts affected by unwanted empty elements.Ensure that no invisible characters (like spaces or line breaks) exist inside empty tags if you want them to be hidden.
Avoid using it for layout-critical elements; remove empty tags in markup when possible.
Test across browsers, as whitespace handling may differ in some editors or CMS outputs.